<template>
  <el-dialog
      class="scheme-add"
      title="预设点配置"
      :visible="dialogVisible"
      width="60%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :modal="false"
      @open="onOpen"
  >
    <el-row>
      <el-col :span="24">
        <el-form ref="schemeForm" :inline="true" :model="form" class="demo-form-inline" :rules="rules">
          <div class="scheme-form">
            <el-form-item label="方案名称" prop="schemeName">
              <el-input v-model="form.schemeName" style="width: 400px" placeholder="请输入方案名称"></el-input>
            </el-form-item>
            <el-form-item label="监听通道数" prop="channelsNum">
              <el-select v-model="form.channelsNum" placeholder="请选择监听通道数">
                <el-option v-for="item in channelsNumOptions" :label="item" :value="item" :key="item"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <!--          设备选择-->
          <div class="channels">
            <div class="channel-item" v-for="count in form.channelsNum" :key="count">
              <div class="screen">{{ count }}</div>
              <el-form-item class="tree-select">
                <el-cascader v-model="form.equipments[count-1]" :options="selfTreeData"
                             :show-all-levels="false" placeholder="请选择设备">
                </el-cascader>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="onSave">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import config from "../config/config";

export default {
  name: "SchemeAdd",
  props: {
    treeData: {//设备数据
      type: Array,
      defaultValue: []
    }
  },
  data() {
    return {
      channelsNumOptions: config.channelsNumOptions,//可选通道数量
      dialogVisible: false,//弹窗的显示与隐藏
      selfTreeData: [],//本窗口的设备数据
      form: {//表单绑定的数据
        schemeName: '',//方案名称
        channelsNum: 4,//通道数量
        equipments: []//设备选择
      },
      rules: {//表格校验规则
        schemeName: [{required: true, message: '请输入方案名称', trigger: 'change'}],
        channelsNum: [{required: true, message: '请选择通道数', trigger: 'change'}]
      }
    }
  },
  methods: {
    //关闭弹窗
    handleClose() {
      this.dialogVisible = false
    },
    //弹窗打开时触发
    onOpen() {
      if (this.$refs.schemeForm) {//如果表格已经构建, 则每次打开重置表格内容
        this.$refs.schemeForm.resetFields()
        this.form.equipments = []
      }
      //初始化设备数据
      this.initTreeData()
    },
    //初始化设备数据
    initTreeData() {
      const noSelect = [{label: '空窗口', value: ''}]
      this.selfTreeData = noSelect.concat(this.treeData)
    },
    //保存
    onSave() {
      console.log('this.form', this.form)
      this.$refs.schemeForm.validate((valid) => {
        if (valid) {
          console.log('this.form', this.form)
          this.$message.success('保存成功')
          this.dialogVisible = false
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.scheme-add {
  /deep/ .el-form-item {
    margin: 0
  }

  .scheme-form {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .channels {
    display: flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    margin-top: 20px;

    .channel-item {
      padding: 14px 11px;

      .screen {
        width: 160px;
        height: 90px;
        line-height: 90px;
        box-sizing: border-box;
        border: 1px dashed #999999;
        text-align: center;
        margin-bottom: 10px;
      }

      .tree-select {
        width: 160px;
      }
    }
  }
}
</style>
